﻿@page "/chart/rounded-column"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the trade in food products with the default column series in the chart. The data points values are shown using data label.</p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, you can see how to render and configure the column type chart. The column type chart is used to compare the frequency, count, total or average of data in different categories.
        You can use the <code>ChartCornerRadius</code> option to customize the vertical rect showing the result as rounded column. <code>DataLabel</code> is used to represent individual data and its value.
    </p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Trade in food products" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis TickPosition="AxisPosition.Inside" LabelPosition="AxisPosition.Inside" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisLabelStyle Color="#ffffff"></ChartAxisLabelStyle>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="300" Interval="50">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Food" YName="Trade" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
                <ChartCornerRadius BottomLeft="10" BottomRight="10" TopLeft="10" TopRight="10"></ChartCornerRadius>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<RoundedColumnChartData> ChartPoints { get; set; } = new List<RoundedColumnChartData>
    {
        new RoundedColumnChartData { Food = "Egg", Trade = 106 },
        new RoundedColumnChartData { Food = "Fish", Trade = 103 },
        new RoundedColumnChartData { Food = "Misc", Trade = 198 },
        new RoundedColumnChartData { Food = "Tea", Trade = 189 },
        new RoundedColumnChartData { Food = "Fruits", Trade = 250 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class RoundedColumnChartData
    {
        public string Food { get; set; }
        public double Trade { get; set; }
    }
}
